<template>
  <div class="app-container">
    <div>长时间未使用车辆查询（默认检索半年未使用单车）</div>
    <div style="margin: 10px auto 0;">
      <div class="card">
        <el-card shadow="hover" style="margin: 10px" :body-style="{ padding: '10px' }" v-for="data in dataList" :key="data.id">
          <div slot="header" style="vertical-align: text-top;font-size: 10px">
            <el-row :gutter="24" style="height: 110px">
              <el-col :span="10">
                <el-image v-if="data.residenturl ==undefined" style="height: 100px"
                          :src="require('@/assets/images/profile.jpg')"
                          :preview-src-list="[require('@/assets/images/profile.jpg')]" class="thumbnail">
                </el-image>
                <el-image v-else style="height: 100px" :src="data.photo" :preview-src-list="[data.photo]"
                          class="thumbnail"></el-image>
              </el-col>
              <el-col :span="14">
                <span style="font-weight: bold">上次使用时间：{{ data.date }}</span>
              </el-col>
            </el-row>
          </div>
          <el-descriptions :labelStyle="{ width: '40%' }" class="margin-top" :column="1" size="mini" border>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-postcard"></i>所在地
              </template>
              {{ data.address }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-s-home"></i>单车位置
              </template>
              {{ data.location }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-mobile-phone"></i>未使用时长
              </template>
              {{ data.day1 }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </div>
    </div>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageSize" :limit.sync="queryParams.recordSize"
                @pagination="getList"/>
  </div>
</template>

<script>
import {listBrokenBike} from "@/api/bike/bike";

export default {
  name: "Broken",
  data() {
    return {
      // 显示搜索条件
      showSearch: true,
      // 显示
      show: true,
      // 总条数
      total: 0,
      // 表格数据
      dataList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageSize: 1,
        recordSize: 10,
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true;
      listBrokenBike().then((res) => {
        if (res.data !== null) {
          let day1
          const nowdate = new Date();
          res.data.forEach(i => {
            let noUseData = new Date(i.date)
            let cha = Math.abs(noUseData.getTime() - nowdate.getTime())
            let days = parseInt(cha / (24 * 60 * 60 * 1000))
            let hours = parseInt(cha % (24 * 60 * 60 * 1000) / (60 * 60 * 1000))
            let mins = parseInt(cha % (60 * 60 * 1000) / (60 * 1000))
            if (days) {
              day1 = `${days}天 ${hours}时 ${mins}分`
            } else if (hours) {
              day1 = `${hours}时 ${mins}分`
            } else {
              day1 = `${mins}分`
            }
            i.day1 = day1

            if (days > 180) {
              this.dataList.push(i)
            }
          });
          this.total = this.dataList.length;
        } else {
          this.total = 0;
          this.dataList = [];
        }
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageSize = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
  },
};
</script>
<style scoped lang="scss">
.cellBox {
  display: flex;

  .text {
    font-weight: 700;
  }
}

.card {
  display: flex;
  flex-wrap: wrap;
}

.jump:hover {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}
</style>
